<template>
  <div class="tw-main">
    <div class="screen">
      <el-row class="tw-grid">
        <el-col :md="24" :lg="8" class="tw-grid__left">
          <tw-card
            :label="$t('m.resourceCoverSta')"
            :rightLabel="resourceTotalCount"
          >
            <el-row>
              <el-col :md="12" :lg="24">
                <div class="tw-box">
                  <tw-echarts
                    id="echarts_resourceDistributionPie"
                    ref="echarts_resourceDistributionPie"
                    :additionalOptions="additionalOptions['echarts_resourceDistributionPie']"
                    @finishCharts="handleFinishCharts"
                    height="40vh"
                  ></tw-echarts>
                </div>
              </el-col>
              <el-col :md="12" :lg="24">
                <div class="tw-box">
                  <tw-echarts
                    id="echarts_resourceDistributionRadar"
                    ref="echarts_resourceDistributionRadar"
                    :additionalOptions="additionalOptions['echarts_resourceDistributionRadar']"
                    height="40vh"
                  ></tw-echarts>
                </div>
              </el-col>
            </el-row>
          </tw-card>
        </el-col>
        <el-col :md="24" :lg="16" class="tw-grid__right">
          <tw-card
            :label="$t('m.paperQuestionCoverSta')"
            :rightLabel="paperQuestionTotalCount"
          >
            <tw-echarts
              id="echarts_testQuestionDistribution"
              ref="echarts_testQuestionDistribution"
              :additionalOptions="additionalOptions['echarts_testQuestionDistribution']"
              height="80vh"
            ></tw-echarts>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwTable from '@/components/TwTable.vue'
import configUtil from '@/config/config'

export default{
  created () {
    // 初始化值
    this.resourceTotalCount = 0
    this.paperQuestionTotalCount = 0
    // 资源分布情况饼图
    let resourceReq = {}
    let vm = this
    this.$axios.post(configUtil.getApiPath() + 'findResourceBySectionid', resourceReq).then(response => {
      let data = response.data
      if (data) {
        let result = {}
        result.note = '资源分布情况饼图'
        let insideArray = []
        let primarySchool = []
        let juniorSchool = []
        let highSchool = []
        if (data.pageInfo.list) {
          let lists = data.pageInfo.list
          let primaryInside = 0
          let juniorInside = 0
          let highInside = 0
          let primaryIndex = 0
          let juniorIndex = 0
          let highIndex = 0
          for (let i = 0; i < lists.length; i++) {
            let resourcename = lists[i].resourcename
            let sectionid = lists[i].sectionid
            let resourcecount = lists[i].resourcecount
            if (sectionid === '100000000060') {
              primaryInside += resourcecount
              let primar = {}
              primar.value = resourcecount
              primar.name = resourcename
              primarySchool[primaryIndex] = primar
              primaryIndex = primaryIndex + 1
            }
            if (sectionid === '100000000070') {
              juniorInside += resourcecount
              let junior = {}
              junior.value = resourcecount
              junior.name = resourcename
              juniorSchool[juniorIndex] = junior
              juniorIndex = juniorIndex + 1
            }
            if (sectionid === '100000000080') {
              highInside += resourcecount
              let high = {}
              high.value = resourcecount
              high.name = resourcename
              highSchool[highIndex] = high
              highIndex = highIndex + 1
            }
          }
          let insideJson = {}
          insideJson.value = primaryInside
          insideJson.name = vm.$i18n.messages[vm.$i18n.locale].m.primarySchool
          insideArray[0] = insideJson
          let juniorJson = {}
          juniorJson.value = juniorInside
          juniorJson.name = vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool
          insideArray[1] = juniorJson
          let highJson = {}
          highJson.value = highInside
          highJson.name = vm.$i18n.messages[vm.$i18n.locale].m.hignSchool
          insideArray[2] = highJson
        }
        result.dataInside = insideArray
        result.primarySchool = primarySchool
        result.juniorSchool = juniorSchool
        result.highSchool = highSchool
        vm.additionalOptions.echarts_resourceDistributionPie = result
        vm.$refs['echarts_resourceDistributionPie'].resizeChart()
      }
    }, response => {
      console.log('error')
      vm.additionalOptions.echarts_resourceDistributionPie = {}
    })
    // 资源使用率
    let useReq = {}
    this.$axios.post(configUtil.getApiPath() + 'findResourceUseByUse', useReq).then(response => {
      let data = response.data
      if (data) {
        let result = {}
        result.note = '资源分布情况雷达图'
        result.title = '资源使用率'
        result.legendData = ['资源数', '使用数']
        result.seriesName = '资源使用率'
        let indicator = []
        let seriesData = []
        let resDataJson = {}
        let resDataValue = []
        let useDataJson = {}
        let useDataValue = []
        let resAll = 0
        if (data.pageInfo.list) {
          let lists = data.pageInfo.list
          for (let i = 0; i < lists.length; i++) {
            let resourcename = lists[i].resourcename
            let resourceCount = lists[i].resourceCount
            let usecount = lists[i].usecount
            let json = {}
            json.name = resourcename
            json.max = resourceCount + usecount
            indicator[i] = json
            resDataValue[i] = resourceCount
            useDataValue[i] = usecount
            resAll += resourceCount
          }
        }
        resDataJson.name = vm.$i18n.messages[vm.$i18n.locale].m.resouceCount
        resDataJson.value = resDataValue
        seriesData[0] = resDataJson
        useDataJson.name = vm.$i18n.messages[vm.$i18n.locale].m.useCount
        useDataJson.value = useDataValue
        seriesData[1] = useDataJson
        result.indicator = indicator
        result.seriesData = seriesData
        // console.log(result)
        vm.additionalOptions.echarts_resourceDistributionRadar = result
        vm.resourceTotalCount = vm.$i18n.messages[vm.$i18n.locale].m.resourceTotalCount + ': ' + resAll
      }
    }, response => {
      console.log('error')
    })
    // 试题分布情况
    let questionReq = {}
    this.$axios.post(configUtil.getApiPath() + 'findQuestion', questionReq).then(response => {
      let data = response.data
      let result = {}
      result.note = '试题分布情况，为了方便使用timeline三个图表放置于一起'
      result.timelineLabel = [vm.$i18n.messages[vm.$i18n.locale].m.primarySchool, vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool, vm.$i18n.messages[vm.$i18n.locale].m.hignSchool]
      result.timelineAutoPlay = true
      result.playInterval = 3000
      let seriesData = []
      // 试题总数
      let primaryAllCount = 0
      let juniorAllCount = 0
      let hihtAllCount = 0
      if (data) {
        // 小学
        let primaryfunnel = []
        let primaryTestType = []
        let primarySubjectType = []
        let primaryJson = {}
        // 初中
        let juniorfunnel = []
        let juniorTestType = []
        let juniorSubjectType = []
        let juniorJson = {}
        // 高中
        let highfunnel = []
        let highTestType = []
        let highSubjectType = []
        let highJson = {}
        let primaryIndex = 0
        let juniorIndex = 0
        let hihtIndex = 0
        let pmindex = 0
        let juindex = 0
        let hiindex = 0
        if (data.pageInfo.list) {
          let lists = data.pageInfo.list
          for (let i = 0; i < lists.length; i++) {
            let sectionid = lists[i].sectionid
            let questiontypename = lists[i].questiontypename
            let resourcecount = lists[i].resourcecount
            if (sectionid === '100000000060') {
              let pmjson = {}
              pmjson.value = resourcecount
              pmjson.name = questiontypename
              primaryTestType[primaryIndex] = pmjson
              primaryIndex = primaryIndex + 1
              primaryAllCount += resourcecount
            }
            if (sectionid === '100000000070') {
              let jujson = {}
              jujson.value = resourcecount
              jujson.name = questiontypename
              juniorTestType[juniorIndex] = jujson
              juniorIndex = juniorIndex + 1
              juniorAllCount += resourcecount
            }
            if (sectionid === '100000000080') {
              let hiJson = {}
              hiJson.value = resourcecount
              hiJson.name = questiontypename
              highTestType[hihtIndex] = hiJson
              hihtIndex = hihtIndex + 1
              hihtAllCount += resourcecount
            }
          }
        }
        if (data.pageInfo.spList) {
          let sublists = data.pageInfo.spList
          for (let j = 0; j < sublists.length; j++) {
            let subsectionid = sublists[j].sectionid
            let subjectname = sublists[j].subjectname
            let count = sublists[j].resourcecount
            if (subsectionid === '100000000060') {
              let subpmjson = {}
              subpmjson.value = count
              subpmjson.name = subjectname
              primaryfunnel[pmindex] = subpmjson
              let primarySubjectTypejson = {}
              primarySubjectTypejson.value = count
              primarySubjectTypejson.name = subjectname
              primarySubjectType[pmindex] = primarySubjectTypejson
              pmindex += 1
            }
            if (subsectionid === '100000000070') {
              let subjujson = {}
              subjujson.value = count
              subjujson.name = subjectname
              juniorfunnel[juindex] = subjujson
              let juniorSubjectTypejson = {}
              juniorSubjectTypejson.value = count
              juniorSubjectTypejson.name = subjectname
              juniorSubjectType[juindex] = juniorSubjectTypejson
              juindex += 1
            }
            if (subsectionid === '100000000080') {
              let subhiJson = {}
              subhiJson.value = count
              subhiJson.name = subjectname
              highfunnel[hiindex] = subhiJson
              let highSubjectTypeJson = {}
              highSubjectTypeJson.value = count
              highSubjectTypeJson.name = subjectname
              highSubjectType[hiindex] = highSubjectTypeJson
              hiindex += 1
            }
          }
        }
        primaryJson.id = vm.$i18n.messages[vm.$i18n.locale].m.primarySchool
        primaryJson.funnel = primaryfunnel
        primaryJson.testType = primaryTestType
        primaryJson.subjectType = primarySubjectType
        juniorJson.id = vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool
        juniorJson.funnel = juniorfunnel
        juniorJson.testType = juniorTestType
        juniorJson.subjectType = juniorSubjectType
        highJson.id = vm.$i18n.messages[vm.$i18n.locale].m.hignSchool
        highJson.funnel = highfunnel
        highJson.testType = highTestType
        highJson.subjectType = highSubjectType
        seriesData[0] = primaryJson
        seriesData[1] = juniorJson
        seriesData[2] = highJson
      }
      result.seriesData = seriesData
      // console.log(result)
      vm.additionalOptions.echarts_testQuestionDistribution = result
      let allCount = primaryAllCount + juniorAllCount + hihtAllCount
      vm.paperQuestionTotalCount = vm.$i18n.messages[vm.$i18n.locale].m.paperQuestionTotalCount + allCount + ',' + vm.$i18n.messages[vm.$i18n.locale].m.primarySchool + ': ' + primaryAllCount + ',' + vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool + ': ' + juniorAllCount + ',' + vm.$i18n.messages[vm.$i18n.locale].m.hignSchool + ': ' + hihtAllCount
    }, response => {
      console.log('error')
    })
  },
  mounted () {
    window.onresize = () => {
      this.$refs['echarts_resourceDistributionPie'].resizeChart()
      this.$refs['echarts_resourceDistributionRadar'].resizeChart()
      this.$refs['echarts_testQuestionDistribution'].resizeChart()
    }
  },
  props: [],
  data () {
    return {
      additionalOptions: {
        echarts_resourcedistributionPie: {},
        echarts_resourceDistributionRadar: {},
        echarts_testQuestionDistribution: {}
      },
      resourceTotalCount: 0,
      paperQuestionTotalCount: 0
    }
  },
  components: {
    TwCard,
    TwEcharts,
    TwTable
  },
  methods: {
    handleFinishCharts: function (payload) {
      let vm = this
      console.log(payload)
      // 资源分布饼图
      let chart = echarts.init(document.getElementById('echarts_resourceDistributionPie'))
      chart.on('click', (params) => {
        if (params.name === vm.$i18n.messages[vm.$i18n.locale].m.primarySchool) {
          let temp = chart.getOption()
          temp.series[1].data = temp.series[1].primarySchool
          chart.setOption(temp)
        }
        if (params.name === vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool) {
          let temp = chart.getOption()
          temp.series[1].data = temp.series[1].juniorSchool
          chart.setOption(temp)
        }
        if (params.name === vm.$i18n.messages[vm.$i18n.locale].m.hignSchool) {
          let temp = chart.getOption()
          temp.series[1].data = temp.series[1].highSchool
          chart.setOption(temp)
        }
      })
      // 默认是小学
      chart.dispatchAction({
        type: 'pieSelect',
        seriesName: vm.$i18n.messages[vm.$i18n.locale].m.type,
        name: vm.$i18n.messages[vm.$i18n.locale].m.primarySchool
      })
      let typeName = [vm.$i18n.messages[vm.$i18n.locale].m.primarySchool, vm.$i18n.messages[vm.$i18n.locale].m.juniorMiddleSchool, vm.$i18n.messages[vm.$i18n.locale].m.hignSchool]
      let dataName = ['primarySchool', 'juniorSchool', 'highSchool']
      let index = 0
      let type = vm.$i18n.messages[vm.$i18n.locale].m.type
      setInterval(() => {
        // 轮流触发内圈选中事件，再更改外圈数据
        chart.dispatchAction({
          type: 'pieUnSelect',
          seriesName: type,
          name: typeName[index]
        })
        index += 1
        if (index === 3) {
          index = 0
        }
        chart.dispatchAction({
          type: 'pieSelect',
          seriesName: type,
          name: typeName[index]
        })
        // 外圈数据
        let temp = chart.getOption()
        temp.series[1].data = temp.series[1][dataName[index]]
        chart.setOption(temp)
      }, 5000)
    }
  }
}
</script>

<style scoped></style>
